<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
       img.borderColor{
            border:1px solid red;
        }
        a.borderColor{
            border:1px solid blue;
        }
        .contentBox,.borderBox{
            width:200px;
            height: 150px;
            padding:50px;
        }
        .contentBox{
            border:1px solid red;

            overflow: hidden;
            outline:1px solid yellow;
            margin:0px auto 50px;
        }
        .borderBox{
            margin-top:50px;
            border:1px solid blue;
        }
        .selected{
            border: 1px solid red;
            background-color: yellow;
        }
    </style>
    <script>
        /*
        function btnQuery(){
            let cssText=document.querySelector("#cssSelectorText").value;
            let nodes=document.querySelectorAll(cssText);
            for(let i=0,len=nodes.length;i<len;i++){
                nodes[i].style.cssText="border:1px solid red;background-color:yellow";

            }

        }
        function init(){
            document.getElementById("btn_query").addEventListener("click",btnQuery,false);
        }
        window.addEventListener("load",init,false);
    */
     function btnQuery(){
        let cssText=document.querySelector("#cssSelectorText").value;
        let maincode=document.getElementsByTagName("main")[0];
        let nodes=maincode.querySelectorAll(cssText); 
        let deleteNodes=maincode.querySelectorAll("[class~=selected]");
        Array.from(deleteNodes).forEach((item)=>{
            item.classList.remove("selected");
        });
        /*let allNodes=maincode.querySelectorAll("*");
        Array.from(allNodes).filter((item)=>item.classList.contains("selected")).forEach((item)=>{
            item.classList.remove("selected");
        });*/
        Array.from(nodes).forEach((item)=>{
                item.classList.add("selected");
            });

     }
     function init() {
            document.getElementById("btn_query").addEventListener("click", btnQuery, false);
        }
        window.addEventListener("load", init, false); //执行时机：DOM树加载完成之前
    </script>
</head>
<body>
    <section>
        css选择器查询：
        <input type="search" name="cssSelectorText" id="cssSelectorText">
        <button type="button" id="btn_query">查询</button>
        <hr>
    </section>
    <main>
    <section>
        <h2>简单标签</h2>
    <input type="text">
    <figure>
        <img class="borderColor" id="logo" src="../img/login_logo.jpg" alt="logo" title="一个小孩">
        <figcaption>一个小朋友</figcaption>
    </figure>
    <div>我是一个块级标签</div>
    <img hidden id="test" src="../img/ooopic_1506740284.png">
    <a class="borderColor" href="../index.html">这是一个超链接</a>我不是一个超链接
    <div>我是一个p标签中的div标签</div>
    <p>000
        <nav>我是一个小导航</nav>
        <a href="#">我是p标签中的a标签</a>
    </p>
    </section>
    <hr>
    <section>
        <h2>盒子属性</h2>
        <div class="contentBox" style="box-sizing: content-box">
            contentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBox
        </div>
        <div class="borderBox" style="box-sizing: border-box">
            IEBox
        </div>
    </section>
    <section>
        <pre>北斗七星高，
哥舒夜带刀。
        </pre>
        <ol style="padding-left:0px;list-style-position: inside">
            <li>熊大</li>
            <li>光头强</li>
            <li>熊二</li>
        </ol>
        <ul>
            <li>熊大</li>
            <li>光头强</li>
            <li>熊二</li>
        </ul>
        <dl>
            <dt>张居正</dt>
            <dd>明朝万历年间的首辅，....</dd>
        </dl>
    </section>
    </main>

</body>
</html>